import { Button } from "@mui/material";
import { interval, of } from 'rxjs';

export default function RxDemo() {
  function funInterval() {
    const observable1 = interval(400);
    const observable2 = interval(300);

    const subscription = observable1.subscribe(x => console.log('first: ' + x));
    const childSubscription = observable2.subscribe(x => console.log('second: ' + x));

    subscription.add(childSubscription);

    setTimeout(() => {
      // Unsubscribes BOTH subscription and childSubscription
      subscription.unsubscribe();
    }, 1000);
  }

  function funOf() {}
  return (
    <div className="div-5-pace">
    <div><a href='https://rxjs.dev/api'>rxjs文档</a></div>
      <Button variant="contained" onClick={funInterval}>interval</Button>
      <Button variant="outlined" onClick={funOf}>of</Button>
      {
        [...Array(35).keys()].map((n) => <Button key={n} variant="contained" onClick={funOf}>of</Button>)
      }
    </div>
  )
}
